<template>
  <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="100px" status-icon style="padding-right:30px"
    class="el-form-220">
    <el-row>
      <el-col :span="8">
        <el-form-item label="广告主" prop="banner_name">
          <el-input clearable v-model="form.banner_name" placeholder="请输入广告主"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="注册地" prop="banner_name">
          <el-input clearable v-model="form.banner_name" placeholder="请输入注册地"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备案号" prop="banner_name">
          <el-input clearable v-model="form.banner_name" placeholder="请输入备案号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="统一社会信用代码" prop="banner_name" label-width="130px">
          <el-input clearable v-model="form.banner_name" placeholder="请输入统一社会信用代码"></el-input>
        </el-form-item>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="8">
        <el-form-item label="发布平台" prop="mediaType">
          <el-select v-model="form.mediaType" placeholder="请选择发布平台" filterable clearable>
            <el-option v-for="item in mediaTypeOptions1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发布区域" prop="area">
          <el-cascader v-model="form.area" :options="areaList" :props="props1" placeholder="请选择区域" collapse-tags />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备案号" prop="banner_name">
          <el-input clearable v-model="form.banner_name" placeholder="请输入备案号"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="广告标题" prop="banner_name">
          <el-input clearable v-model="form.banner_name" placeholder="请输入广告标题"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="广告内容" prop="banner_name">
          <el-input clearable v-model="form.banner_name" placeholder="请输入广告内容"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="广告截图" prop="envidence">
          <el-upload v-model:file-list="fileList" class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :limit="3">
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="落地页截图" prop="envidence">
          <el-upload v-model:file-list="fileList" class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :limit="3">
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="展示页截图" prop="envidence">
          <el-upload v-model:file-list="fileList" class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :limit="3">
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="广告页链接" prop="remark">
          <el-input clearable v-model="form.remark" placeholder="请输入广告页链接"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="落地页链接" prop="remark">
          <el-input clearable v-model="form.remark" placeholder="请输入落地页链接"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="展示页链接" prop="remark">
          <el-input clearable v-model="form.remark" placeholder="请输入展示页链接"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="广告宣传电话" prop="remark">
          <el-input clearable v-model="form.remark" placeholder="请输入广告宣传电话"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <el-form-item label="投放区域" prop="mediaType">
          <el-select v-model="form.mediaType" placeholder="请选择投放区域" filterable clearable>
            <el-option v-for="item in mediaTypeOptions1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="广告大类" prop="mediaType">
          <el-select v-model="form.mediaType" placeholder="请选择广告大类" filterable clearable>
            <el-option v-for="item in mediaTypeOptions1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="广告类型" prop="mediaType">
          <el-select v-model="form.mediaType" placeholder="请选择广告类型" filterable clearable>
            <el-option v-for="item in mediaTypeOptions1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="违法级别" prop="mediaType">
          <el-select v-model="form.mediaType" placeholder="请选择违法级别" filterable clearable>
            <el-option v-for="item in mediaTypeOptions1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="违法条例" prop="mediaType">
          <el-button type="primary">选择</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="专项标签" prop="mediaType">
          <el-button type="primary">选择</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="备注意见" prop="remark">
      <el-input clearable v-model="form.remark" placeholder="请输入备注" type="textarea"></el-input>
    </el-form-item>


    <!-- <el-form-item label="违法法规" prop="laws">
      <el-cascader v-model="form.laws" :options="lawsList" :props="props1" placeholder="请选择违法法规" collapse-tags />
    </el-form-item>
    <el-form-item label="广告类别" prop="category_id">
      <el-cascader v-model="form.category_id" :options="adCateList" :props="props1" collapse-tags />
    </el-form-item>
    <el-form-item label="广告主">
      <el-select v-model="form.ad" placeholder="请选择广告主">
        <el-option v-for="item in adverList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item style="text-align: right;">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定
      </el-button>
      <el-button @click="closeDailog()">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { mediaTypeOptions1, mediaTypeOptions, caseStatusOptions, clueResourceOptions, } from "@/util/options"
// import { getArea, getAdCategories,  getLaws, getAdvertisers, } from "@/api/common"
import { disabledDate } from '@/util/common'

const props1 = {
  value: "id",
  label: "name",
  multiple: true,
}
const emits = defineEmits(["closeDailog"]); // 父组件监听事件，同步子组件值的变化给父组件
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const state: any = reactive({
  areaList: [],//区域数据
  adCateList: [],// 获取广告分类
  bannerList: [],// 获取广告分类
  lawsList: [],// 获取法律法规
  adverList: [],// 获取广告分类
  specTagsList: [],// 获取专项标签
  channelsList: [],
  userList: [],// 获取所有用户
  taskList: [],// 获取所有任务
  fileList: [],
  form: {}
})

// //获取广告分类
// const reqGetAdCategories = async () => {
//   let { data } = await getAdCategories()
//   state.adCateList = data;
// }
// //获取法律法规
// const reqGetLaws = async () => {
//   let { data } = await getLaws()
//   state.lawsList = data;
// }
// const reqGetAdvertisers = async () => {
//   let { data } = await getAdvertisers()
//   state.adverList = data;
// }

const rules = reactive<FormRules<any>>({
  caseStatus: [
    { required: true, message: '请选择案件状态', trigger: 'change' },
  ],
  clueSources: [
    { required: true, message: '请选择线索来源', trigger: 'change', },
  ],
  mediaType: [
    { required: true, message: '请选择媒体类别', trigger: 'change' },
  ],
  mediaType1: [
    { required: true, message: '请选择媒体类型', trigger: 'change' },
  ],
  category_id: [
    { required: true, message: '请选择广告类别', trigger: 'change' },
  ],
  area: [
    { required: true, message: '请选择所属区域', trigger: 'change' },
  ],
  laws: [
    { required: true, message: '请选择违法法规', trigger: 'change' },
  ],
  program: [
    { required: true, message: '请选择移交机构', trigger: 'change' },
  ],
  deadLine: [
    { type: 'date', required: true, message: '请选择截止日期', trigger: 'blur' },
  ],
})

// const submitForm = async (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   await formEl.validate((valid, fields) => {
//       if (valid) {
//           console.log('submit!')
//       } else {
//           console.log('error submit!', fields)
//       }
//   })
// }

// const closeDailog=()=>{
//   emits("closeDailog")
// }

// //获取区域
// const reqGetArea = async () => {
//   let { data } = await getArea()
//   if (data && data.length) {
//       let list = data.filter((e: any) => e.parent_id == null);
//       let list1 = []
//       let firstId = list[0].id;
//       data.forEach((e: any) => {
//           if (e.parent_id == firstId) {
//               list1.push(e)
//           }
//       })
//       console.log(list)
//       list1.forEach((city: any) => {
//           city.children = []
//           data.forEach((item: any) => {
//               if (item.parent_id == city.id) {
//                   city.children.push(item)
//               }
//           })
//       })
//       state.areaList = list1;
//   }

// }

onMounted(() => {
  // reqGetArea()
  // reqGetAdCategories();
  // reqGetAdvertisers();
  // reqGetLaws();
})
const { areaList, adCateList, fileList, bannerList, adverList, lawsList, form } = toRefs(state);
</script>
